<template>
  <message-add ref="RefChilde" @getData="changePage(paginationProps.current, paginationProps.pageSize)" :type="type" :id="aeId" />

  <div class="header">
    <h4 class="title">默认事项通知</h4>
    <img class="picture" src="../../../assets/img.png" />
  </div>

  <div class="bread">
    <p class="breadtext">> 消息列表</p>
    <div class="btn">
      <a-button @click="openAddForm" size="large" shape="round" type="primary">
        <PlusOutlined />
        新增消息
      </a-button>
    </div>
  </div>

  <a-list item-layout="horizontal" :data-source="data" :pagination="paginationProps">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="messagetitle">{{ item.title }}</p>
          </template>

          <template #description>
            <p>{{ item.create_by }}发布于{{ item.create_at }}</p>
            <p>{{ item.content }}</p>
          </template>

          <!-- 进度条 -->
          <template>
            <a-progress :percent="50" status="active" />
          </template>
        </a-list-item-meta>

        <a @click="checkUserIsComfirm(item.id)" class="messagecount">
          {{ item.push_count }}推送/{{ item.confirm_count }}确认
          <message-user ref="openMod" :id="push_id" />
        </a>

        <template #actions>
          <a @click="openAddForm(item.id)">修改</a>
          <a-popconfirm title="确定要删除该消息?" ok-text="删除" cancel-text="取消" @confirm="onDelete(item.id)">
            <a v-show="role == '1'">删除</a>
          </a-popconfirm>
          <a v-show="role == '1'" @click="choosePushUsers(item.id)">推送</a>
        </template>
      </a-list-item>
    </template>
  </a-list>

  <ChooseUsers ref="openModal" @chosUser="postData" />
</template>
<script lang="ts">
import { defineComponent, Ref, ref, onMounted, inject } from 'vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { get, detele, post } from '../../../utils/request/request'
import ChooseUsers from '../../../components/chooseuser.vue'
import MessageAdd from './MessageAdd.vue'
import MessageUser from './MessageUser.vue'

interface DataItem {
  key: string
  id: number
  title: string
  create_at: string
  create_by: string
  push_count: number
  confirm_count: number
  percentage: number
}
const data: Ref<DataItem[]> = ref([])

// 网络请求
const useHttpEffect = (chosId: Ref<number | undefined>) => {
  const reload: any = inject('reload')
  const token: string = localStorage.getItem('token') as string
  const type = ref<number>(0) // 0新增 1编辑
  const aeId = ref<number>(0) // 0新增 1编辑
  const pcId = ref<number>(0)
  const RefChilde = ref()
  const push_id = ref<any>()
  const openModal = ref()
  const openMod = ref()

  // 分页配置
  const paginationProps = ref({
    current: 1,
    pageSize: 5,
    total: 20,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '15', '20'],
    // showQuickJumper: true,
    showTotal: (total: string) => `共${total}条通知`,
    onChange: (current: number, pageSize: number) => changePage(current, pageSize),
    onShowSizeChange: (current: number, pageSize: number) => changePage(current, pageSize)
  })

  // 消息列表数据
  const changePage = async (page: number, limit: number) => {
    const res: any = await get(`/admin/api/v1/message/list?page=${page}&limit=${limit}`, token)
    console.log(res.data)
    paginationProps.value.current = res.pagination.page
    paginationProps.value.pageSize = res.pagination.limit
    paginationProps.value.total = res.pagination.total
    const modifiedData = res.data
    // 往modifiedData里面加一个百分比
    data.value = modifiedData
  }

  // 新增
  // 根据有无id判断类型
  const openAddForm = (id: number) => {
    console.log(id)
    if (id > 0) {
      aeId.value = id
      type.value = 1
    } else {
      type.value = 0
    }
    console.log(RefChilde.value)
    RefChilde.value.showDrawer()
  }

  const checkUserIsComfirm = (id: number) => {
    console.log(id)
    pcId.value = id
    push_id.value = id
    openMod.value.showModal()
  }

  //删除
  const onDelete = async (id: Ref<number | undefined>) => {
    const res: any = await detele(`/admin/api/v1/message/${id}`, {}, token)
    if (res.status_code === 0) {
      data.value = data.value.filter((tem: any) => tem.id !== id.value)
      message.success('删除成功')
      changePage(paginationProps.value.current, paginationProps.value.pageSize)
      //重新刷新页面
      reload()
    } else {
      message.error(res.status_msg)
    }
  }

  // 推送用户
  const postData = async (idList: number[]) => {
    const res: any = await post(
      `/admin/api/v1/message/${chosId.value}/push`,
      {
        app_user_id: idList
      },
      token
    )
    console.log(idList)
    if (res.status_code === 0) {
      message.success('推送用户成功')
    }
  }

  return { paginationProps, push_id, checkUserIsComfirm, onDelete, changePage, postData, openAddForm, type, RefChilde, openModal, chosId, openMod, aeId }
}

//列表操作
const useListEffect = () => {
  const openModal = ref()
  const chosId = ref<number>()
  const choosePushUsers = (id: number) => {
    openModal.value.showModal()
    chosId.value = id
  }

  return { openModal, chosId, choosePushUsers }
}

export default defineComponent({
  components: {
    ChooseUsers,
    MessageAdd,
    MessageUser
  },
  setup() {
    const role = ref<string>(localStorage.getItem('role') as string)
    const { openModal, chosId, choosePushUsers } = useListEffect()
    const { paginationProps, push_id, checkUserIsComfirm, onDelete, postData, changePage, openAddForm, type, RefChilde, openMod, aeId } = useHttpEffect(chosId)
    const visible = ref<boolean>(false)

    const showModal = () => {
      visible.value = true
    }

    onMounted(() => {
      changePage(1, 5)
    })

    return {
      data,
      showModal,
      paginationProps,
      openModal,
      choosePushUsers,
      onDelete,
      postData,
      changePage,
      ChooseUsers,
      push_id,
      role,
      openAddForm,
      type,
      RefChilde,
      chosId,
      checkUserIsComfirm,
      openMod,
      aeId
    }
  }
})
</script>
<style lang="less" scoped>
.btn {
  display: inline-block;
  padding-left: 750px;
}
.breadtext {
  display: inline-block;
  font-family: SourceHanSansCN-Bold;
  font-size: 24px;
  font-weight: bold;
  line-height: 50.4px;
  letter-spacing: 0.2em;
  color: #000000;
}
.messagetitle {
  font-size: 20px;
}
.messagecount {
  font-size: 20px;
}
.header {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  display: inline-block;
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  display: inline-block;
  width: 10%;
  margin-left: 580px;
  border-radius: 10px;
  background-color: #4c63e9;
}
</style>
